<template>
  <div class="container">
    <div class="top-container">
      <el-form
        ref="ruleFormRef"
        :model="formdata"
        status-icon
        :rules="rules"
        class="query-form"
        label-width="100"
      >
        <el-form-item label="新会员促销" prop="newer_promotion">
          <!-- <el-date-picker
            v-model="formdata.newer_date"
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="请选择日期"
          />
           <span style="margin: 8px;">之后的会员打</span> -->

          <el-input
            v-model="formdata.newer_promotion"
            :step="0.1"
            type="number"
            style="width: 120px"
            placeholder="打折"
          /> 
          <!-- <el-input-number
            v-model="formdata.newer_promotion"
            :min="0"
            :precision="1"
            :step="0.1"
            :max="10"
            placeholder="请输入折扣"
          >
            <template #suffix>折</template>
          </el-input-number> -->
          折
        </el-form-item>

        <el-form-item prop="order_discount" label="订单折扣">
          <el-input
            v-model="formdata.order_discount"
            type="number"
            style="width: 280px"
            :step="0.1"
            placeholder="打折"
          />
          <!-- <el-input-number
            v-model="formdata.order_discount"
            :min="0"
            :precision="1"
            :step="0.1"
            :max="10"
            placeholder="请输入折扣"
          >
            <template #suffix>折</template>
          </el-input-number> -->
        </el-form-item>
        <!-- 
        <el-form-item prop="order_discount" label="新会员折扣">
          <el-input-number
            v-model="formdata.newer_promotion"
            :min="0"
            :precision="1"
            :step="0.1"
            :max="10"
            placeholder="请输入折扣"
          >
            <template #suffix>折</template>
          </el-input-number>
        </el-form-item> -->

        <el-form-item label="备注">
          <span style="color: #999; width: 100%"
            >如用户同时满足以上折扣，则选取最优惠的折扣进行计算</span
          >
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)"> 保存 </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted,watch } from "vue";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import {
  getPromotionManagementList,
  putPromotionManagementList,
} from "@/api/promotionManagement";
import { formatDate } from "@/utils/date";

const formdata:{
  newer_promotion?:number|string,
  newer_date?:any,
  order_discount?:number|string
} = reactive({
  newer_promotion: 0,
  newer_date: formatDate(new Date),
  order_discount: 0,
});

const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules<typeof formdata>>({
  newer_promotion: [{ required: true, message: "折扣不能为空", trigger: "blur" }],
  order_discount:[{ required: true, message: "折扣不能为空", trigger: "blur" }],
});

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      //赋值今天的日期
      formdata.newer_date=formatDate(new Date)      
      const res = await putPromotionManagementList(formdata);
      if (res.code == "200") {
        ElMessage.success(res.msg);
        await getData()
      } else {
        ElMessage.error(res.msg);
      }
    } else {
      ElMessage.error("表单验证失败");
    }
  });
};

watch(()=> formdata.order_discount,(nwlval:number)=>{
if (nwlval<0) {
  formdata.order_discount=0
}else if (nwlval>10) {
  formdata.order_discount=9
}
})

watch(()=> formdata.newer_promotion,(nwlval:number)=>{
if (nwlval<0) {
  formdata.newer_promotion=0
}else if (nwlval>10) {
  formdata.newer_promotion=9
}
})


const getData= async()=>{
  const res = await getPromotionManagementList();
    if (res.code == "200") {
      //回显
      Object.assign(formdata, res.data);
    }
}

onMounted(async () => {
  try {
    // const res = await getPromotionManagementList(formdata);
    // if (res.code == "200") {
    //   Object.assign(formdata, res.data);
    // }
    await getData()
  } catch (error) {
    ElMessage.error("查询失败");
  }
});
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  background-color: white;

  .top-container {
    .query-form {
      .el-select {
        --el-select-width: 240px;
      }
    }
  }
}
</style>
